<template>
<div class="main-nav">
  <div class="title clearfix">
    <div class="logo clearfix">
      <span class="placeholder"></span>
      <img src="../assets/img/logo.png">
      <h2>海军战斗文化研练系统</h2>
    </div>
    <div class="nav">
      <span class="placeholder"></span>
      <Menu mode="horizontal" active-name="1">
        <MenuItem name="1">
            <span class="item" @click="goHome">首页</span>
        </MenuItem>
        <MenuItem name="2">
            <Anchor v-if="showAnchor" :affix="false">
              <AnchorLink href="#interaction" title="教学直播交互" />
            </Anchor> 
            <span v-else class="item" @click="interaction">教学直播交互</span>
        </MenuItem>
        <MenuItem name="3">
            <span class="item">案例联席研练</span>
        </MenuItem>
        <MenuItem name="4">
            <span class="item" @click="goEvaluation">教学评价</span>
        </MenuItem>
        <MenuItem name="5">
            <Anchor v-if="showAnchor" :affix="false">
              <AnchorLink href="#dibbling" title="资源点播" />
            </Anchor> 
            <span v-else class="item" @click="dibbling">资源点播</span>
        </MenuItem>
    </Menu>
    </div>
  </div>
  <div class="desc">
    <img class="bgimg" src="../assets/img/918.jpg">
    <Card style="width:230px">
        <div class="info" style="text-align:center">
            <img class="avatar" width="82" height="82" src="../assets/img/avatar.png">
            <ul>
              <li>
                <Badge dot>
                  <Icon type="ios-notifications-outline" size="26"></Icon>
                </Badge>
              </li>
              <li class="name">张三</li>
              <li>18级学员</li>
              <li>
                <Button type="text">退出</Button>
              </li>
            </ul>
        </div>
        <Divider />
        <div class="btn">
          <div><Button type="primary"><Icon type="md-person" size="24" />个人中心</Button></div>
          <div><Button type="primary"><Icon type="ios-construct" size="24" />学习辅助</Button></div>
        </div>
    </Card>
  </div>
</div>
</template>

<script>
import UpdatePassword from './main-navbar-update-password'
import { clearLoginInfo } from '@/utils'
export default {
  data() {
    return {
      updatePassowrdVisible: false,
      showAnchor: false
    }
  },
  components: {
    UpdatePassword
  },
  mounted() {},
  computed: {
    pathHome() {
      return this.$route.name === 'home'
    }
  },
  methods: {
    // 修改密码
    updatePasswordHandle() {
      this.updatePassowrdVisible = true
      this.$nextTick(() => {
        this.$refs.updatePassowrd.init()
      })
    },
    // 退出
    logoutHandle() {
      this.$confirm(`确定进行[退出]操作?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$http({
            url: this.$http.adornUrl('/sys/logout'),
            method: 'post',
            data: this.$http.adornData()
          }).then(({ data }) => {
            if (data && data.code === 0) {
              clearLoginInfo()
              this.$router.push({ name: 'login' })
            }
          })
        })
        .catch(() => {})
    },
    // 回到首页
    goHome() {
      this.$router.push({ name: 'home' })
    },
    // 资源点播
    dibbling() {
      this.$router.push({ name: 'home', hash: '#dibbling' })
    },
    // 教学直播交互
    interaction() {
      this.$router.push({ name: 'home', hash: '#interaction' })
    },
    // 教学评价
    goEvaluation() {
      this.$router.push({ name: 'evaluation' })
    }
  },
  watch: {
    $route(newName, oldName) {
      if (newName.name === 'home') {
        this.showAnchor = true
      } else {
        this.showAnchor = false
      }
    }
  }
}
</script>
<style lang="scss">
.main-nav {
  .title {
    height: 90px;
    line-height: 90px;
    padding: 0 20px;
    .logo {
      width: auto;
      display: inline-block;
      img {
        vertical-align: middle;
        width: 3.9vw;
        height: 3.7vw;
      }
      h2 {
        display: inline;
        vertical-align: middle;
        font-family: '幼圆 Bold', '幼圆 Regular', '幼圆';
        font-weight: 700;
        font-style: normal;
        font-size: 2.4vw;
      }
    }
    .nav {
      height: 100%;
      float: right;
      vertical-align: middle;
      .ivu-menu {
        display: inline-block;
        vertical-align: middle;
        .ivu-menu-item {
          font-size: 0;
          .item {
            font-size: 14px;
          }
          & > div {
            display: inline-block;
            vertical-align: middle;
            .ivu-anchor {
              .ivu-anchor-ink {
                display: none;
              }
              .ivu-anchor-link {
                padding: 0;
                font-size: 14px;
              }
            }
          }
          .ivu-btn {
            font-size: 14px;
            padding: 0;
          }
        }
      }
    }
  }
  .desc {
    display: flex;
    width: 100%;
    padding: 20px;
    background: black;
    box-sizing: border-box;
    overflow: hidden;
    .bgimg {
      width: calc(100% - 230px);
      height: 280px;
    }
    .ivu-card {
      width: 230px;
      flex: 0 0 230px;
      .info {
        display: flex;
        .avatar {
          width: 82px;
          height: 82px;
        }
        ul {
          width: 100%;
          padding-left: 10px;
          li {
            width: 100%;
            text-align: left;
            &:first-of-type {
              text-align: right;
            }
            &:last-of-type {
              text-align: right;
            }
            .ivu-btn {
              font-size: 16px;
            }
          }
          .name {
            font-size: 16px;
            font-weight: bolder;
          }
        }
      }
      .ivu-divider-horizontal {
        margin: 0;
      }
      .btn {
        font-size: 16px;
        div {
          .ivu-btn {
            width: 100%;
            height: 50px;
            .ivu-icon {
              margin-right: 5px;
            }
          }
          margin-top: 10px;
          &:first-of-type {
            margin-top: 20px;
          }
        }
      }
    }
  }
}
</style>